<template>
  <div>
    <Table :columns="columns" :data="data" height="300">
      <template slot-scope="{ row, index }" slot="extract_express">
        <Input v-model="data[index]['extract_express']" placeholder="请输入"/>
      </template>
      <template slot-scope="{ row, index }" slot="var_name">
        <Input v-model="data[index]['var_name']" placeholder="请输入"/>
      </template>
      <template slot-scope="{ row, index }" slot="action">
        <Button type="error" size="small" @click="remove(index)">删除</Button>
      </template>
    </Table>
    <Button type="primary" style="display:block;margin:20px auto;width: 300px" @click="hanldeAdd">添加断言</Button>
  </div>
</template>

<script>
const columns = [
  {
    title: '表达式',
    key: 'extract_express',
    slot: 'extract_express'
  },
  {
    title: '变量名称',
    key: 'var_name',
    slot: 'var_name'
  },
  {
    title: '操作',
    slot: 'action',
    width: 120,
    align: 'center'
  }
]
export default {
  name: "extract",
  props: {
    data:Array
  },
  data() {
    return {
      columns,
    }
  },
  watch:{
    data:{
      handler(v){
        this.$emit("changeExtrcat", v)
      }
    }
  },
  methods: {
    hanldeAdd() {
      this.data.push({
        extract_express:"",
        var_name:""
      })
    },
    remove(index) {
      this.data.splice(index, 1);
    }
  }
}
</script>

<style scoped>

</style>
